<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Title</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../static/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../static/easyui/themes/icon.css">
    <script type="text/javascript" src="../static/easyui/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../static/easyui/demo/demo.css">
    <script type="text/javascript" src="../static/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<h2>基本数据表格</h2>
<p>数据表格是由标记创建的，不需要JavaScript代码。</p>
<div style="margin:20px 0;"></div>
<a href="#"  class="easyui-linkbutton" onclick="getSelected()">得到该行数据</a>
<a href="#"  class="easyui-linkbutton" onclick="add()">添加数据</a>
<a href="#"  class="easyui-linkbutton" onclick="deteleit()">删除数据</a>
<table id="mytable" class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px"
       data-options="singleSelect:true,collapsible:true">
    <thead>
    <tr>
        <th data-options="field:'itemid',width:80">Item ID</th>
        <th data-options="field:'productid',width:100">Product</th>
        <th data-options="field:'listprice',width:80,align:'right'">List Price</th>
        <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
        <th data-options="field:'attr1',width:250">Attribute</th>
        <th data-options="field:'status',width:60,align:'center'">Status</th>
    </tr>
    </thead>
</table>



<!--表单添加-->

<div id="dd" class="easyui-dialog"  style="width:600px;height:500px;" data-options="closed:true,iconCls:'icon-save',resizable:true,modal:true">
    <div style="margin-bottom:20px">
        <input class="easyui-textbox" name="itemid" style="width:100%" data-options="label:'itemid:',required:true">
    </div>
    <div style="margin-bottom:20px">
        <input class="easyui-textbox" name="productid" style="width:100%" data-options="label:'productid:',required:true">
    </div>
    <div style="margin-bottom:20px">
        <input class="easyui-textbox" name="listprice" style="width:100%" data-options="label:'listprice:',required:true">
    </div>
    <div style="margin-bottom:20px">
        <input class="easyui-textbox" name="unitcost" style="width:100%;height:60px" data-options="label:'unitcost:',multiline:true">
    </div>
    <div style="margin-bottom:20px">
        <input class="easyui-textbox" name="attr1" style="width:100%;height:60px" data-options="label:'attr1:',multiline:true">
    </div>
    <div style="margin-bottom:20px">
        <input class="easyui-textbox" name="status" style="width:100%;height:60px" data-options="label:'status:',multiline:true">
    </div>
    <div id="bb">
        <a href="#" class="easyui-linkbutton" onclick="saveit()">保存</a>
        <a href="#" class="easyui-linkbutton" onclick="closeit()">关闭</a>
    </div>
</div>

<script type="text/javascript">
    var data = [
        {itemid:1001,productid:2001,listprice:250,unitcost:80,attr1:"xxxxx",status:1},
        {itemid:1002,productid:2004,listprice:252,unitcost:80,attr1:"xxxxx",status:1},
        {itemid:1003,productid:2004,listprice:253,unitcost:80,attr1:"xxxxx",status:1},
        {itemid:1004,productid:2004,listprice:254,unitcost:80,attr1:"xxxxx",status:1}
    ]
    $(function (){

        $("#mytable").datagrid("loadData",data)
    })
    function getSelected(){
        var row = $("#mytable").datagrid('getSelected');
        console.log(row)
        if (row){
            $.messager.alert('Info',row.itemid)
            console.log(row)
        }
    }
    function add(){
        $('#dd').dialog('open')
    };
    function deteleit(){
        var row = $('#mytable').datagrid('getSelected')
        var indexrow = $('#mytable').datagrid('getRowIndex', row)
        console.log("这是"+indexrow)
        data.splice(indexrow,1)
        $('#mytable').datagrid('loadData',data)

    }

    function saveit(){
        var itemid = $('#dd input[name="itemid"]').val();
        var productid = $('#dd input[name = "productid"]').val();
        var listprice = $('#dd input[name = "listprice"]').val();
        var unitcost = $('#dd input[name="unitcost"]').val();
        var attr1 = $('#dd input[name="attr1"]').val();
        var status = $('#dd input[name="status"]').val();
        var newData = {
            itemid: itemid,
            productid: productid,
            listprice: listprice,
            unitcost: unitcost,
            attr1: attr1,
            status: status
        };
        data.push(newData)
        console.log(data)
        $("#mytable").datagrid("loadData",data)
        $('#dd').dialog('close')
    }
    function closeit(){
        $('#dd').dialog('close')
    }

</script>
</body>
</html>